<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" th:href="@{/resources/css/bootstrap/bootstrap.min.css}" href="../resources/css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" th:href="@{/resources/font-awesome/css/font-awesome.min.css}" href="../resources/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" th:href="@{/resources/css/pluginsExt/common.css}" href="css/pluginsExt/common.css"/>
    <link rel="stylesheet" th:href="@{/resources/css/pluginsExt/register/register.css}" href="css/pluginsExt/register/register.css"/>
    <title>注册</title>
</head>
<body>
    <div class="Head">
        <div class="w">
            <h2>优 茶</h2>
            <h4>欢迎注册</h4>
            <div class="pull-right linkLogin">
                <span>已有账号</span>&nbsp;
                <a href="login.html">去登录</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="form-main">
            <form action="" method="post" id="rgForm" onsubmit="return regSub()">
                <div class="input-item">
                    <label>用户名</label>
                    <i class="fa fa-check-circle"></i><input maxlength="20" id="username" name="username" type="text"/>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 只能使用数字、字母、下划线组合</span>
                </div>
                <div class="input-item">
                    <label>密码</label>
                    <i class="fa fa-check-circle"></i><input maxlength="15" id="password" name="password" type="password"/>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 建议使用字母、数字和符号两种及以上的组合，6-20个字符</span>
                </div>
                <div class="input-item">
                    <label>确认密码</label>
                    <i class="fa fa-check-circle"></i><input maxlength="15" id="confirm_password" name="confirm_password" type="password"/>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次确认您的密码</span>
                </div>
                <div class="input-item">
                    <label>手机号码</label>
                    <i class="fa fa-check-circle"></i><input id="phone" maxlength="11" name="phone" type="text"/>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 完成验证后，可以使用该手机登录和找回密码</span>
                </div>
                <div class="input-item">
                    <label>邮箱</label>
                    <i class="fa fa-check-circle"></i><input id="email" maxlength="30" name="email" type="email"/>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 完成验证后，可以使用该手机登录和找回密码</span>
                </div>
                <div class="input-item">
                    <label>验证码</label>
                    <input type="text" maxlength="4"/>
                    <img src="img/locate/code.jpg" alt=""/>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 看不清?点击图片更换验证码</span>
                </div>
                <div class="input-item">
                    <label>手机验证码</label>
                    <input type="text" maxlength="4"/>
                    <button class="getPhoneQode">获取验证码</button>
                </div>
                <div class="form-agreen">
                    <input type="checkbox" id="agree" name="agree" checked="">
                    我已阅读并同意 <a href="#">《优茶用户注册协议》</a>
                </div>
                <div class="input-sub">
                    <input type="submit" class="btn btn-lg" value="立即注册">
                </div>
            </form>
        </div>
    </div>
</body>
<!--[if gte IE 7]>
<script th:src="@{/resources/js/jquery-1.11.3.min.js}" src="../resources/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if !IE]><!-->
<script th:src="@{/resources/js/jquery-2.2.3.min.js}"  src="../resources/js/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script th:src="@{/resources/js/plugins/validate/jquery.validate.min.js}" src="../resources/js/plugins/validate/jquery.validate.min.js"></script>
<script th:src="@{/resources/js/pluginsExt/register/register.js}"  src="js/pluginsExt/register/register.js"></script>
<script th:src="@{/resources/js/pluginsExt/footer/footer.js}"  src="js/pluginsExt/footer/footer.js"></script>
</html>